<!--
 * @Author: wilson 1207014631@qq.com
 * @Date: 2023-07-06 14:59:29
 * @LastEditors: wilson 1207014631@qq.com
 * @LastEditTime: 2023-07-10 15:10:32
 * @Description: 
-->
<template>
  <el-dialog
    :model-value="dialogVisible"
    title="导入损害程度数据"
    width="500px"
    @close="closeDialog"
  >
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <div class="text-right mb-10px">
          <el-link type="primary" :href="'/template_value.txt'" download target="_blank">
            模版下载
          </el-link>
        </div>
      </el-col>
      <el-col :span="24">
        <el-upload :before-upload="handleExceed" drag :limit="1" action="" accept=".txt">
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text"> 拖拽文件或 <em>点击上传</em> </div>
          <template #tip v-if="errVisible">
            <div class="el-upload__tip"> {{ errorTxt }} </div>
          </template>
        </el-upload>
      </el-col>
    </el-row>
    <template #footer>
      <el-button type="primary" @click="submitHanlder()"> 确定 </el-button>
      <el-button @click="cancelHandler">取消</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { UploadFilled } from '@element-plus/icons-vue'

const props = defineProps<{
  dialogVisible: boolean
}>()

let fileContent = ''
let errorTxt = ''
let errVisible = ref(false)

const handleExceed = function (file) {
  const reader = new FileReader()
  reader.onload = (evt) => {
    fileContent = (evt.target?.result || '').toString() as string
    console.log('fileContent', fileContent)
  }
  reader.readAsText(file)
  return false
}

// 定义emit事件
const emit = defineEmits({
  closeDialog: null,
  submitHandler: null
})

const closeDialog = function () {
  emit('closeDialog')
}

const submitHanlder = function () {
  emit('submitHandler', fileContent)
  closeDialog()
}
const cancelHandler = () => {
  closeDialog()
}
</script>
<style lang="scss" scoped></style>
<style lang="scss"></style>
